<template>
    <div class="index">
      <transition name="fade">
        <div class="boxShadow" v-show="isShadow">
          <div class="model">
            <div class="top">用户协议</div>
            <div class="center">{{text}}</div>
            <div class="bottom">
              <div class="btn-left" @click="isShadow=false;isCheck=false">不同意</div>
              <div class="btn-right" @click="isShadow=false;isCheck=true">同&nbsp;&nbsp;意</div>
            </div>
          </div>
        </div>
      </transition>
      <div class="banner-wrapper">
        <banner></banner>
      </div>
      <div class="msg-wrapper">
        <msg-scroll></msg-scroll>
      </div>
      <div class="picker-wrapper">
        <div class="picker-top">
          <div class="left">
            <p class="name" style="display: inline-block">贷款金额</p>
          </div>
          <div class="right">
            <p class="name" style="display: inline-block">贷款时长</p>
          </div>
        </div>
        <div class="picker-bottom">
          <div class="picker-block" >
            <picker :arrs="amounts" @getData="_getAmountData"></picker>
            <div class="unit">元</div>
          </div>
          <div class="picker-block" >
            <picker :arrs="times" @getData="_getTimeData"></picker>
            <div class="unit">天</div>
          </div>
        </div>
      </div>
      <div class="count-wrapper">
        <div class="top">
          <div class="item"><span class="dy"></span><span class="name">快速审查费:</span>{{auditFee}}.00元</div>
          <div class="item"><span class="dy"></span><span class="name" style="width: 35px">利息:</span>{{profitFee}}.00元</div>
          <div class="item"><span class="dy"></span><span class="name">账户管理费:</span>{{manageFee}}.00元</div>
          <div class="item"><span class="dy"></span><span class="name" style="width: 80px">实际到账金额:</span><span style="color: #ff723f;font-size: 16px">{{actualAmount}}.00元</span></div>
        </div>
        <div class="bottom">
          <div class="check" :class="{isCheck:isCheck}" @click="isCheck=false"></div>
          <p class="text" @click="isShadow=true">个人信息使用授权书(查询服务)</p>
        </div>
      </div>
      <div class="btn-wrapper">
        <button class="toSmt" @click="_toLoan">我要贷款</button>
      </div>
    </div>
</template>
<script>
  import banner from '../../components/banner/banner'
  import msgScroll from '../../components/msgScroll/msgScroll'
  import picker from '../../components/picker/picker'
  import global from '../../common/global/global';
  import {getStorage} from "../../common/js/localStorage";
  import axios from 'axios'
    export default {
        name: "index",
        data(){
          return{
            amounts:[],
            checkAmount:{},
            times:[],
            checkTime:{},
            text:'',          //授权书文本
            isCheck:false,    //是否阅读授权书
            isShadow:false,   //是否显示boxShadow
            actualAmount:'',  //实际到账金额
            auditFee:'',      //快速审查费
            manageFee:'',     //账户管理费
            profitFee:''      //利息
          }
        },
        components:{
          'banner':banner,
          'msg-scroll':msgScroll,
          'picker':picker
        },
        created() {
          this._getLoanMessages()
          this._getPowerOfAttorneyText()
        },
        methods:{
          /*@props
           *  我要贷款
           */
          _toLoan(){
            if(!getStorage('token')){
              this.$router.push('/login')
            }
          },
          /*@props
           * values = > 贷款金额
           * 获取贷款金额
           */
          _getAmountData(value){
            this.checkAmount = value
            this._getLoan()
          },
          /*@props
           * values = > 贷款金额
           * 获取贷款金额
           */
          _getTimeData(value){
            this.checkTime = value
            this._getLoan()
          },
          /*@props
           * 获取贷款选项
           */
          _getLoanMessages(){
            var _this = this
            axios.get(global.$host+'/api/open/loanData/loanNum',
              {},
              {
                headers: {
                }
              }
            )
              .then(res => {
                if(res.status===global.ERR_OK){
                  if(res.data.status===global.CUSTOM_ERR_OK){
                    let data = res.data.data
                    if(data.amounts){
                      const amounts = [];
                      for(let i = 0;i<data.amounts.length;i++){
                        let amount = {}
                        amount.id = data.amounts[i].id
                        amount.name = data.amounts[i].loanAmount
                        amounts.push(amount)
                      }
                      _this.amounts = amounts
                      if(_this.amounts){
                        _this.checkAmount = _this.amounts[0]
                      }
                    }
                    if(data.times){
                      const times = [];
                      for(let j = 0;j<data.times.length;j++){
                        let time = {}
                        time.id = data.times[j].id
                        time.name = data.times[j].loanNum
                        times.push(time)
                      }
                      _this.times = times
                      if(_this.times){
                        _this.checkTime = _this.times[0]
                      }
                    }
                  }
                }
              })
              .catch(e => {
                console.log(e)
              })
          },
          /*@props
           * 获取授权书内容
           */
          _getPowerOfAttorneyText(){
            var _this = this
            axios.get(global.$host+'/api/info/newInfo',
              {},
              {
                headers: {
                  // 'Authorization': getStorage('token')
                }
              }
            )
              .then(res => {
                if(res.status===global.ERR_OK){
                  if(res.data.status===global.CUSTOM_ERR_OK){
                    _this.text = res.data.data.persionInfo
                  }
                }
              })
              .catch(e => {
                console.log(e)
              })
          },
          _getLoan(){
            var _this = this
            axios.get(global.$host+'/api/open/loanData/loanData?amount='+this.checkAmount.name,
              {
                // amount:this.checkAmount.name,
              },
              {
                headers: {
                  // 'Authorization': getStorage('token')
                }
              }
            )
              .then(res => {
                if(res.status===global.ERR_OK){
                  if(res.data.status===global.CUSTOM_ERR_OK){
                    let data = res.data.data
                    this.actualAmount=data.actualAmount  //实际到账金额
                    this.auditFee=data.auditFee          //快速审查费
                    this.manageFee=data.manageFee        //账户管理费
                    this.profitFee=data.profitFee        //利息
                  }
                }
              })
              .catch(e => {
                console.log(e)
              })
          }
        }
    }
</script>

<style scoped lang="stylus">
  .index
    height calc(100% - 44px)
    position relative
    background #f4f4f4
    overflow auto
    .msg-wrapper
      position relative
      top -8px
      z-index 20
      height 16px
      padding 8px
      background #ffffff
      margin 0 10px
      border-radius 6px
      box-shadow -2px 2px 5px rgba(160,160,160,.1)
    .picker-wrapper
      height 171px
      background #ffffff
      margin 0px 10px 0 10px
      border-radius 6px
      overflow hidden
      box-shadow -2px 2px 5px rgba(160,160,160,.1)
      .picker-top
        display flex
        height 44px
        .left,.right
          position relative
          flex 1
          height calc(100% - 16px)
          margin 8px 0
          .name
            height 28px
            line-height 28px
            padding-left 33px
            text-align left
            color #4B4B4B
        .left
          border-right 1px solid #dddddd
          .name
            background url(money_icon@2x.png)no-repeat 0px center/23px 27px
        .right
          .name
            background url(time_icon@2x.png)no-repeat 0px center/25px 27px
      .picker-bottom
        display flex
        height 127px
        .picker-block
          position relative
          flex 1
          height 120px
          overflow hidden
          .unit
            position absolute
            top 45px
            right 17px
            color #ffa38a

    .count-wrapper
      height 86px
      background #ffffff
      margin 10px 10px 0 10px
      border-radius 6px
      overflow hidden
      padding 3px 11px
      box-shadow -2px 2px 5px rgba(160,160,160,.1)
      .top
        font-size 0
        .item
          display inline-block
          width 50%
          font-size 12px
          position relative
          text-align left
          line-height 25px
          .name
            display inline-block
            width 70px
          .dy
            position relative
            top 15px
            display inline-block
            border 3px solid #01AAED
            border-radius 3px
            margin-right 4px
            margin-bottom 17px
      .bottom
        position relative
        text-align left
        .check
          position absolute
          top 3px
          width 13px
          height 13px
          border-radius 50%
          background url("greenOval_icon@2x.png") no-repeat center /13px 13px
          &.isCheck
            background url("greenOval_icon2@2x.png") no-repeat center /13px 13px
        .text
          color #57B557
          font-size 12px
          text-align left
          display inline-block
          padding-left 16px

    .btn-wrapper
      margin 8px 10px
      .toSmt
        width 100%
        color #ffffff
        height 44px
        line-height 44px
        font-size 17px
        border-radius 6px
        border none
        outline none
        background #49A2FE

    .boxShadow
      position absolute
      width 100%
      height 100%
      z-index 100
      background rgba(20,20,20,0.7)
      &.fade-enter-active, .fade-leave-active
        transition: opacity .5s;
      &.fade-enter, .fade-leave-to
        opacity: 0;
      .model
        width calc(100% - 76px);
        height 370px
        background #ffffff
        position absolute
        left 38px
        top calc(50% - 185px)
        border-radius 6px
        .top
          height 56px
          line-height 56px
          color #4B4B4B
          font-size 18px
          font-weight 500
          border-bottom 1px solid #ebebeb
        .center
          height calc(100% - 133px)
          text-align left
          padding 11px 16px
          overflow auto
          text-indent 2em
        .bottom
          display flex
          height 53px
          border-top 1px solid #ebebeb
          .btn-left,.btn-right
            flex 1
            line-height 53px
            color #B7B7B7
          .btn-left
            border-right 1px solid #ebebeb
          .btn-right
            color #49A2FE

</style>
